<template>
  <div>
    <Header />
    <NavBar />
    <div class='s-bg-green'>
        <div class='g-container flex flex-space-between flex-h-center user-center-hd'>
            <div class='flex flex-h-center'>
                <img class='f-mrt10 img-avatar' src="../../assets/default_user_white.png" alt="" />
                <div>
                    <div class='hd-left-tp'>
                        <img src="" alt="">
                        <p>尊贵的万律用户，晚上好</p>
                    </div>
                    <div>
                        <span>账户余额：<span class='s-c-orange'>3250</span>元</span>
                        <router-link class='hd-btn' to="/login">充值</router-link>
                        <router-link class='hd-btn' to="/login">提现</router-link>
                    </div>
                </div>
            </div>
            <p>遇到问题找万律，高效处理问题！</p>
        </div>
    </div>
    <div class='mn'>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from '../../components/Header.vue'
import NavBar from '../../components/NavBar'
export default {
  name: 'UserCenter',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    'Header': Header,
    'NavBar': NavBar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-avatar{
    width: 54px;
    height: 54px;
    border-radius: 50%;
}
.user-center-hd{
    height: 100px;
    color: #fff;
}
.hd-left-tp{
    margin-bottom: 16px;
}
.hd-btn{
    color: #fff;
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 10px;
}
</style>
